<template>

  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础属性" name="first">
        <el-form @submit.native.prevent :inline="true" ref="updateForm" @change="onChangeForm" :model="updateForm"
                 label-width="70px">
          <div>
            <el-row>
              <el-form-item label="id">
                <el-input v-model="updateForm.id" readonly=""></el-input>
              </el-form-item>

            </el-row>
            <el-row>
              <el-form-item label="节点类型">
                <el-input v-model="updateForm.nodeType" readonly=""></el-input>
              </el-form-item>
              <el-button type="primary" v-show="selectDialogBtn" @click="onShowSelectDialog">选择接口</el-button>
            </el-row>
            <el-row>
              <el-form-item label="节点名称">
                <el-input v-model="updateForm.name" readonly=""></el-input>
              </el-form-item>
              <el-form-item label="节点编码">
                <el-input v-model="updateForm.code" readonly=""></el-input>
              </el-form-item>
              <el-form-item label="编码别名" v-show="selectDialogBtn">
                <el-input v-model="updateForm.alias"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="节点描述" style="width: 100%">
                <el-input v-model="updateForm.desc" style="width: 100%" readonly=""></el-input>
              </el-form-item>
            </el-row>
          </div>
          <el-divider></el-divider>
          <div v-show="enableEditNodeData">
            <el-row>
              <el-form-item v-show="updateForm.nodeData.retryTotal" label="重试次数">
                <el-input type="number " v-model="updateForm.nodeData.retryTotal" max="5" min="1"></el-input>
              </el-form-item>
              <el-form-item label="原始报文">
                <el-checkbox v-model="updateForm.nodeData.keepOldOut">保留</el-checkbox>
              </el-form-item>
            </el-row>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="输入加工" name="second">
        <encoder-form></encoder-form>
      </el-tab-pane>
      <el-tab-pane label="输入加工" name="third"></el-tab-pane>
    </el-tabs>

    <el-dialog title="选择接口" :visible.sync="selectDialog" :modal="false">
      <el-row>
        <el-form :inline="true" class="demo-form-inline">
          <!--<el-form-item label="类型">-->
          <!--<el-select v-model="queryParam.resourceType" placeholder="请选择资源类型">-->
          <!--<el-option label="所有类型" value></el-option>-->
          <!--<el-option-->
          <!--v-for="(role, index) in resourceTypeList"-->
          <!--:key="index"-->
          <!--:label="role.resourceTypeName"-->
          <!--:value="role.resourceTypeCode"-->
          <!--&gt;</el-option>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item label="关键字">
            <el-input v-model="queryParam.searchKey"
                      placeholder="请输入资源名称、标识符查询"
                      @change="doSearchList"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table :data="apiList" @selection-change="onSelectRowEvent">
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column prop="apiCode" align="center" width="200" label="ApiCode"></el-table-column>
        <el-table-column prop="apiName" align="center" width="200" label="Api名称"></el-table-column>
        <el-table-column prop="apiType" align="center" width="80" label="Api类型"></el-table-column>
        <el-table-column prop="apiName" align="center" width="80" label="同异步"></el-table-column>
        <el-table-column prop="id" align="center" label="操作">
          <template slot-scope="scope">
            <el-link style="margin-right: 10px" type="primary">输入示例</el-link>
            <el-link style="margin-right: 10px" type="primary">输出示例</el-link>
            <el-link style="margin-right: 10px" type="primary">选择</el-link>
            <!--  <el-link style="margin-right: 10px" type="primary">重置密码</el-link>-->
          </template>
        </el-table-column>
      </el-table>
      <div>
        <dy-pagination
          :current-page.sync="queryParam.currentPage"
          :page-size.sync="queryParam.pageSize"
          @click="doSearchList"
          :total="tableTotal"
        ></dy-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DyPagination from '@/components/pagination/DyPagination.vue'
  import engineApiApi from '@/apis/dpsApp/engineTbFlowPortApi.js'

  export default {
    components: {
      DyPagination
    },
    data () {
      return {
        activeName: 'first',
        queryParam: {
          searchKey: ''
        },
        selectDialog: false,
        selectDialogBtn: false,
        enableEditNodeData: false,
        apiList: [],
        updateForm: {
          id: 'xxx',
          name: '',
          desc: '',
          nodeData: {
            keepOldOut: true,
            retryTotal: 1
          }
        },
        tableTotal: 1
      }
    },
    created () {
      this.updateFormData()
      engineApiApi.selectList({}).then(msg => {
        this.apiList = msg.rows
      })
    },
    methods: {
      onChangeForm () {
        console.log(111)
      },
      onShowSelectDialog () {
        this.selectDialog = true
      },
      /**
       * 选中某行事件处理
       * @param selection
       */
      onSelectRowEvent (selection) {
        this.selectRows = selection
        if (this.selectRows.length != 1) {

        }
      },
      updateFormData () {
        for (var key in this.formData) {
          if (this.formData.hasOwnProperty(key) === true) {
            this.updateForm[key] = this.formData[key]
          }
        }
        if (this.updateForm.nodeType == 'api') {
          this.selectDialogBtn = true
          this.enableEditNodeData = true
        } else {
          this.selectDialogBtn = false
          this.enableEditNodeData = false
        }
      },
      doSearchList () {

      }
    },
    props: {
      formData: {
        type: Object,
        default: {
          id: 'xxx',
          name: '',
          desc: '',
          nodeData: {
            keepOldOut: true,
            retryTotal: 1
          }
        }
      }

    },
    watch: {
      updateForm: {
        handler (val, oldVal) {
          //this.$emit("update:formData", val);
          this.$emit('updateFormData', val)
        },
        deep: true
      },
      formData (newV, oldV) {
        this.updateForm = this.formData
      }
    }
  }
</script>

<style scoped>

</style>
